<script setup>
import headerBar from '@/components/header/index.vue'
import footerBar from '@/components/footer/index.vue'
import { ref } from 'vue'
import { bannerlist,modulelist } from '@/api/index';
import { getToken } from '@/utils/auth';
import { useRouter } from 'vue-router';
const router = useRouter();
const swiperList = ref([]);
const moduleList = ref([]);
let params = {
  "data": {
    "bannertype": 1
  },
  "token": getToken()
}
bannerlist(params).then(res=>{
	swiperList.value = res.data.bannerlist;
})
let param1 = {
  "data": {
  }
}
modulelist(param1).then(res=>{
	moduleList.value = res.data.ModuleList;
})
const jump = (id) => {
	router.push({
		path: '/detail',
		query: {
			id: id
		}
	})
}
</script>
<template>
	<div class="container">
		<header-bar></header-bar>
		<div class="poster">
			<el-carousel height="688px">
				<el-carousel-item v-for="(item, index) in swiperList" :key="index">
					<a href="#" target="_blank" class="carousel">
						<img :src="item.bannerurl" alt="">
					</a>
				</el-carousel-item>
			</el-carousel>
		</div>
		<div class="module-container">
			<div class="module" v-for="(item,index) in moduleList" :key="index">
				<div class="module-item" >
					<div class="module-content">
						<div class="module-title">{{item.modulename}}</div>
						<div class="module-desc">
							<p>{{ item.ModuleAbstract }}</p>
						</div>
						<div class="module-more" @click="jump(item.informationid)"> 
							<span>了解详情</span> 
						</div>		
					</div>
					<div class="module-pic">
						<img :src="item.moduleimage" alt="">
					</div>
				</div>
			</div>
		</div>
		<footer-bar></footer-bar>
	</div>
</template>
<style lang="scss">
.poster{
	width: 100%;
	height: auto;
	img{
		width: 100%;
	}
}
.module{
	height: 100%;
	margin-top: 50px;
	&-item{
		width: 100%;
		height: 688px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	&-title{
		font-size: 70px;
	}
	&-desc{
		width: 566px;
		font-family: MiSansVF_Medium;
		font-size: 18px;
		color: #7C7C7C;
		line-height: 30px;
		text-align: left;
		margin-top: 30px;
	}
	&-pic{
	    width: 780px;
		height: 400px;
		
		img{
			display: block;
			width: 100%;
			height: auto;
		}
	}
	&-more{
		font-family: MiSansVF_Medium;
		font-size: 24px;
		line-height: 32px;
		margin-top: 20px;
		cursor: pointer;
	}
}
.module:nth-child(even){
	.module-item{
		flex-direction: row-reverse;
		.module-pic{
			margin-right: 170px;
		}
		.module-title{
			text-align: left;
		}
	}
	.module-more{
		float: left;
	}
}
.module:nth-child(odd){
	.module-item{
		.module-pic{
			margin-left: 170px;
		}
		.module-title{
			text-align: right;
		}
	}
	.module-more{
		float: right;
	}
}
.module:nth-child(1){
	.module-item{
		background-image: url(../../assets/images/module-bg01.png);
	}
	.module-title{
		color: #FF0061;
	}
	.module-more{
		color: #FF0061;
	}
}
.module:nth-child(2){
	.module-item{
		background-image: url(../../assets/images/module-bg02.png);
	}
	.module-title{
		color: #20D5A8;
	}
	.module-more{
		color: #20D5A8;
	}
}
.module:nth-child(3){
	.module-item{
		background-image: url(../../assets/images/module-bg03.png);
	}
	.module-title{
		color: #45A1FF;
	}
	.module-more{
		color: #45A1FF;
	}
}
.module:nth-child(4){
	.module-item{
		background-image: url(../../assets/images/module-bg04.png);
	}
	.module-title{
		color: #8145E5;
	}
	.module-more{
		color: #8145E5;
	}
}
</style>
